$(function () {
  // 一、获取网址问号后的部分，再获取等号后的product_id的值，确定当前的商品id然后详情页
  // console.log(window.location.search)
  // console.log(window.location.search.split("=")[1])
  // console.log(window.location.search.slice(12))
  var id = getCookie("id");
  console.log(id)
  var proId = window.location.search.split("=")[1];
  // console.log(proId)
  // 根据截取出来地址来的商品id调用商品详情的数据渲染页面
  $.ajax({
    type: "get",
    url: "http://jx.xuzhixiang.top/ap/api/detail.php",
    data: { id: proId },
    dataType: "json",
    success: function (res) {
      console.log(res);
      // data是对象里边一个data属性
      // data = data.data;//这时data是一个数组里边有20个对象，每一个是一个商品信息data[i]是每一条商品信息
      // console.log(data)
      // console.log(data[0].pid)
      // 遍历接口中所有的数据的商品pid（data[i].pid）如果它等于当前网址栏（列表页跳过来时拼接在问号后边的商品id则拿到
      // 这个data[i]就是当前跳转过来的商品的信息
      // for (let i = 0; i < data.length; i++) {
      //   if (data[i].pid == proId) {
      //     // console.log(data)
      //     console.log(data[i]);
          // 拼接渲染左侧轮播图
          var str1 = '';
          str1 += `<div class="swiper-slide">
                        <img src=${res.data.pimg} alt="">
                    </div>`
          $('.s_box').after(str1)//在该类名的元素后添加str1

          // 拼接渲染商品信息
          var str2 = '';
          str2 += `<h3><a href="">${res.data.pname}</a></h3>
                      <span>POWDER KISS LIPSTICK</span>
                      <p>${res.data.pdesc}</p>
                      <div class="dat">
                          <h4><a href="">${res.data.pdesc}</a></h4>
                          <a href="">Muted pinky red</a><br>
                          <span>[哑光质地]</span>
                      </div>
                      <div class="information-show-bottom">
                          <span>3克</span>
                          <a href="">分享</a>
                      </div>
                      <div class="price">￥${res.data.pprice}</div>
                      <div class="car-btn"><a >加入购物车</a></div>
                      <div class="last">
                          <a href="">任购免邮</a><br>
                         <a href="">何时送达?</a>
                      </div>`

          $('.information-show').append(str2);
          // 点击加购时请求添加商品购物车的接口将商品添加到后台，将来在调用查询购物车的接口时用
          $('.car-btn').click(function () {
            $.ajax({
              type: "get",
              url: "http://jx.xuzhixiang.top/ap/api/add-product.php",
              data: {uid:id, pid:proId,pnum:1 },//给自己的购物车接口加数据，将来在接口中通过id找到自己的购物车数据
              dataType: "json",
              success: function (res) {
                window.location.href = "car.html";
                console.log(res)
              }
            });
        
          })
          // 渲染右边大的放大镜图片
          var str3 = '';
          str3 = `<img src=${res.data.pimg}>`;
          $('.b_box').append(str3)

          class Magnifier {
            constructor() {
              // 选择元素
              this.Sbox = document.querySelector(".s_box");
              this.span = document.querySelector(".s_box b");
              this.Bbox = document.querySelector(".b_box");
              this.Bimg = document.querySelector(".b_box img");

              // 绑定事件
              this.addEvent();
            }
            addEvent() {
              var that = this;
              this.Sbox.onmouseover = function () {
                that.over();
                $('.bigpic').show()
              }
              this.Sbox.onmouseout = function () {
                that.out();
              }
              this.Sbox.onmousemove = function (eve) {
                var e = eve || window.event;
                that.move(e);
              }
            }
            over() {
              this.span.style.display = "block";
              this.Bbox.style.display = "block";

              // span宽高比例：根据右侧大图和显示区域计算得来
              var spanW = this.Bimg.offsetWidth / this.Bbox.offsetWidth;
              var spanH = this.Bimg.offsetHeight / this.Bbox.offsetHeight;
              // console.log(spanW,spanH)
              // 根据宽高比例，设置span的真正宽高
              this.span.style.width = this.Sbox.offsetWidth / spanW + "px";
              this.span.style.height = this.Sbox.offsetHeight / spanH + "px";
            }
            out() {
              this.span.style.display = "none";
              this.Bbox.style.display = "none";
            }
            move(e) {
              // console.log(e);
              // this.span.style.left = e.offsetX + "px";
              // this.span.style.top = e.offsetY + "px";

              // 鼠标相对于页面的坐标 - sBox左边的位置 - span宽度的一半
              var l = e.pageX - this.Sbox.offsetLeft - this.span.offsetWidth / 2;
              var t = e.pageY - this.Sbox.offsetTop - this.span.offsetHeight / 2;

              // 边界限定
              if (l < 0) l = 0;    // left
              if (t < 0) t = 0;    // top
              // right
              if (l > this.Sbox.offsetWidth - this.span.offsetWidth) {
                l = this.Sbox.offsetWidth - this.span.offsetWidth
              }
              // bottom
              if (t > this.Sbox.offsetHeight - this.span.offsetHeight) {
                t = this.Sbox.offsetHeight - this.span.offsetHeight
              }

              // 设置span的位置
              this.span.style.left = l + "px";
              this.span.style.top = t + "px";

              // 计算span在sBox中的移动比例
              var x = l / (this.Sbox.offsetWidth - this.span.offsetWidth);
              var y = t / (this.Sbox.offsetHeight - this.span.offsetHeight);
              // console.log(x, y);

              // 根据比例设置右侧大图的移动位置
              this.Bimg.style.left = x * (this.Bbox.offsetWidth - this.Bimg.offsetWidth) + "px";
              this.Bimg.style.top = y * (this.Bbox.offsetHeight - this.Bimg.offsetHeight) + "px";
              // window.onload()
            }
          }
          new Magnifier;

    }
  });

  // 左边轮播插件的js

  var mySwiper1 = new Swiper('.pic-change > .swiper-container', {
    direction: 'horizontal', // 垂直切换选项水平horizontal垂直vertical

    // 如果需要分页器(小圆点)
    pagination: {
      el: '.swiper-pagination',
      clickable: true,//点击小圆点切换图片
    },
  });


  // 滑过改变图片
  $('.img-box li').hover(function () {
    $(this).find("img").css({ 'z-index': '4' });
  }, function () {
    $(this).find("img").css({ 'z-index': '2' });

  });
  //  点击手风琴效果
  $('.img-box li').click(function () {
    $(this).stop().animate({ height: '180px' }, 800)
      .siblings().stop().animate({ height: '60px' }, 800)

  });
  // 点击上箭头img-box上移每次移动420px，用一个变量l动态的改变定位的距离，
  // $('.img-box').animate({top:'-420px'})错误的
  // 如果写死则造成点击一次移动到定位位置，再点击由于已经到了移动的位置所以没有效果
  var t = 0;
  // 点击上箭头
  $('.icon-shangjiantou').click(function () {
    if (t == -1260) {
      t = -1260;
      $('.icon-shangjiantou').css({ color: '#7b7b7b' })
    } else {
      t -= 420;
      $('.img-box').animate({ top: t + 'px' })
      $('.icon-shangjiantou').css({ color: '#fff' })

    }

  });
  // 点击下箭头
  $('.icon-xiajiantou').click(function () {
    if (t == 0) {
      t = 0;
      $('.icon-xiajiantou').css({ color: '#7b7b7b' })
    } else {
      t += 420;
      $('.img-box').animate({ top: t + 'px' })
      $('.icon-xiajiantou').css({ color: '#fff' })

    }





  });
  // 点击加购
  


})


